.body {
  background: #FFFFFF;
}

.wrapper-contion {
  width: 100%;
  height: 100%;
}


.wrapper {
  padding-top: 570px;
  width: 750px;
  background: url('https://oss.cloudcpc.com/a5b7c1ff4d4b3fac8f17a5b92f450f8b.png') no-repeat center;
  background-size: cover;

}

.wrapper-white {
  margin-top: -35px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 40px 40px 0px 0px;
  padding-top: 54px;
}

.top-Title {
  margin-bottom: 69px;
  font-size: 36px;
  font-weight: 500;
  color: #18202D;
  line-height: 48px;
  text-align: center;
}

.wrapper-white-view {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.wrapper-backView {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 67px;
}

.wrapper-white-url {
  width: 62px;
  height: 62px;
  margin-bottom: 32px;
}

.wrapper-white-txt {
  text-align: center;
  width: 160px;
  font-size: 26px;
  color: #3E4C78;
  line-height: 36px;
}

.wrapper-white-img {
  position: absolute;
  bottom: -90px;
  width: 184px;
  height: 186px;
}

.object-white {
  padding-top: 39px;
  padding-bottom: 66px;
  background: #F3F6FF;
  display: flex;
  flex-direction: column;
}

.object-title {
  margin-bottom: 40px;
}

.object-sub {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 62px;
  text-align: center;
  width: 685px;
  font-size: 28px;
  color: #888888;
  line-height: 46px;
}

.object-view-item {
  display: inline-block;
  margin-left: 32px;
  margin-right: 32px;
  width: 973px;
  height: 525px;
}

.scene-wrapper {
  padding-top: 65px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.scene-sub {
  margin-bottom: 76px;
}

.scene-white-view {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.scene-backView {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 73px;
  width: 322px;
  height: 250px;
  background: #FFFFFF;
  box-shadow: 0px 3px 13px 0px rgba(161, 175, 225, 0.21);
}

.wrapper-white-url {
  margin-top: -35px;
  margin-bottom: 34px;
  width: 69px;
  height: 69px;
}

.scene-txt {
  margin-bottom: 31px;
  font-size: 28px;
  color: #505C6B;
  line-height: 26px;
  text-align: center;
}

.scene-white-sub {
  width: 300px;
  font-size: 22px;
  color: #79838F;
  line-height: 36px;
  text-align: center;
}

.scene-img {
  margin-left: auto;
  margin-right: auto;
  width: 572px;
  height: 403px;
  margin-bottom: 111px;
}

.period-sub {
  margin-bottom: 60px;
  width: 700px;
}

.period-title {
  margin-top: 60px;
}

.period-view-item {
  display: inline-block;
  width: 949px;
  height: 511px;
}

.period-com-view {
  width: 750px;
  height: 448px;
  background: url('https://oss.cloudcpc.com/668b459f55ed38d2851d4895c7bc5c59.png') no-repeat center;
  background-size: cover;

}

.period-midd-img {
  margin-left: auto;
  margin-right: auto;
  width: 565px;
  height: 467px;
}

.department-wrapper {
  position: relative;
  padding-top: 74px;
  background: #F3F6FF;
  display: flex;
  flex-direction: column;
}

.department-title {
  font-size: 30px;
  margin-bottom: 31px;
}

.department-view {
  margin-left: 38px;
  margin-bottom: 75px;
  width: 597px;
  height: 523px;
  transform: scale(1);
  -webkit-animation-name: scaleDraw;
  /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;
  /*动画播放的次数*/
  -webkit-animation-duration: 5s;
  /*动画所花费的时间*/
}

@keyframes scaleDraw {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
    opacity: 1;
  }

  25% {
    transform: scale(1.2);
    /*放大1.1倍*/
    opacity: 0.6;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

.department-img1 {

  position: absolute;
  top: 463px;
  left: 94px;
  width: 143px;
  height: 143px;
}

.department-img2 {

  position: absolute;
  top: 696px;
  left: 213px;
  width: 136px;
  height: 136px;
}

.department-img3 {
  position: absolute;
  top: 464px;
  left: 337px;
  width: 108px;
  height: 108px;

}

.department-img4 {
  position: absolute;
  top: 625px;
  left: 398px;
  width: 100px;
  height: 100px;

}

.department-img5 {
  position: absolute;
  top: 415px;
  left: 523px;
  width: 129px;
  height: 129px;
}

.department-img6 {
  position: absolute;
  top: 604px;
  left: 590px;
  width: 124px;
  height: 124px;
}

.department-sub {
  margin-bottom: 10px;
}

.department-down-img {
  margin-left: 4px;
  width: 742px;
  height: 592px;
}

.terminal-wrapper {
  position: relative;
  padding-top: 51px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.terminal-title {
  margin-bottom: 196px;
}

.terminal-down-img {
  width: 750px;
  height: 341px;
}

.terminal-scroll {
  position: absolute;
  top: 153px;
  width: 750px;
  height: 460px;
}

.terminal-view-item {
  display: inline-block;
}

.terminal-white {
  margin-left: 32px;
  margin-right: 32px;
  display: flex;
  flex-direction: row;
}

.terminal-back {
  display: flex;
  flex-direction: column;
  margin-right: 34px;
}

.terminal-top-img {
  width: 366px;
  height: 201px;
  margin-bottom: 48px;
}

.terminal-top-txt {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 325px;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 42px;
}

.value-wrapper {
  position: relative;
  padding-top: 79px;
  background: #F3F6FF;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-title {
  margin-bottom: 100px;
}

.value-img {
  margin-bottom: 220px;
  width: 640px;
  height: 640px;
  transform: scale(1);
  -webkit-animation-name: scaleDraw;
  /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;
  /*动画播放的次数*/
  -webkit-animation-duration: 5s;
  /*动画所花费的时间*/
}

@keyframes scaleDraw {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
    opacity: 1;
  }

  25% {
    transform: scale(1.1);
    /*放大1.1倍*/
    opacity: 0.4;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(1.1);
    opacity: 0.4;
  }
}

.value-url {
  position: absolute;
  top: 190px;
  left: 10px;
  width: 729px;
  height: 814px;
}

.feature-wrapper {
  padding-top: 62px;
  padding-bottom: 40px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.feature-list {
  margin-bottom: 46px;
  margin-left: 30px;
  width: 691px;
  background: #FFFFFF;
  box-shadow: 0px 3px 13px 0px rgba(161, 175, 225, 0.21);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.feature-left {
  margin-left: 40px;
  margin-right: 45px;
  width: 133px;
  height: 143px;
}

.feature-right {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-right-txt {
  margin-bottom: 18px;
  font-size: 30px;
  color: #18202D;
  line-height: 48px;
}

.feature-right-sub {
  width: 457px;
  font-size: 24px;
  color: #888888;
  line-height: 36px;
}
